<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="utf-8" />
    <title>用户登录</title>
    <link rel="stylesheet" media="screen" href="assets/css/style.css">
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
    
	<script src="assets/js/packages/jquery-3.3.1.js"></script>
	<script src="bootstrap/js/bootstrap.min.js"></script>
	<script src="assets/js/packages/angular.min.js"></script>
	<script src="assets/js/customAlert.js"></script>
</head>
<body>
<!--style="background-color:#1CC09F" background-image:url(/img/1.jpg); #283643 -->
<form name="form-login" action="/dologin" method="post" style="background-image:url(img/bg.jpg);background-size:cover; background-repeat:no-repeat; background-position:top center">
	 <div id="particles-js">
		<div class="login">
		<div style="font-size: 24px; text-align: center;margin-top: 50px;">
			水资源管理系统
		</div>
			 <div class="login-top">

			</div>
			<div class="login-center clearfix">
				<div class="login-center-img"><img src="img/name.png"/></div>
				<div class="login-center-input">
					<input type="text" id="login-username" name="login-username" placeholder="请输入您的用户名" autofocus />
					<!-- <div class="login-center-input-text">用户名</div> -->
				</div>
			</div>
			<div class="login-center clearfix">
			<div class="login-center-img"><img src="img/password.png"/></div>
			<div class="login-center-input">
				<input type="password" id="login-password" name="login-password" placeholder="请输入您的密码" autofocus />
				<!-- <div class="login-center-input-text">密码</div> -->
			</div>
		</div>
		<div id="btn" onclick="checkSubmit();" class="login-button" >
			登录
		</div>
		<div id="reset" onclick="checkReset();" class="login-button" >
			忘记密码
		</div>
<!--			<div class="col-lg-10" style="margin-top:20px; text-align:right">-->
<!--				<a href="javascript:reset_pwd();" >-->
<!--					<font color="black">忘记密码</font>-->
<!--				</a>-->
<!--			</div>-->
		<!-- <div class="col-lg-10" style="margin-top:20px; text-align:right">
			<a href="" data-toggle="modal" data-dismiss="modal" data-target="#register">
				<font color="black">还没有账号？点我注册</font>
			</a>
		</div> -->
	</div>
</div>
</form>
<div class="modal fade" id="reset_pwd" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<h4 class="modal-title">重置密码</h4>
			</div>
			<div class="form-group">
				<label>用户名</label>
				<input class="form-control" placeholder="请输入用户名"  id="reset_user_name" type="text" >
			</div>
			<div class="form-group">
				<label>新密码</label>
				<input class="form-control" placeholder="请输入新密码" id="new_pwd" type="password">
			</div>
			<div class="form-group">
				<label>确认密码</label>
				<input class="form-control" placeholder="请再次输入新密码" id="new_pwd_confirm" type="password">
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-primary" id="reset_pwd_submit">提交</button>
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			</div>
		</div>
	</div>
</div>
    <!-- <#include "/login/register.ftl"/> -->
    
	<!-- Site footer 
	<#include "/common/footer.ftl"/>-->
	
	<script type="text/javascript">
		function checkSubmit() {
			var username = $('#login-username').val()
			var password = $('#login-password').val()
			if (username == null || username == '') {
				Alert.alert('用户名不能为空！');
				return false;
			}
			if (password == null || password == '') {
				Alert.alert('密码不能为空！');
				return false;
			}

			$.ajax({
				type : "post",
				url : "/user_control/dologin",
				data : {
					username : username,
					password : password,
				},
				async : false,
				success : function(data) {
					if (data.data == "用户已登录") {
						window.location.href = "/index.html";
					} else {
						Alert.alert(data.data);
					}
				}
			});
			return true;
		}

	</script>
	<script src="pages/js/reset_pwd.js"></script>
	<script src="assets/js/particles.min.js"></script>
    <script src="assets/js/app.js"></script>
</body>
</html>
